<template>
    <!-- 深度监听 -->
    <div>
        <button @click="obj1.age++">obj1.age++</button> 
        <hr>
        <button @click="obj2.age++">obj2.age++</button>
    </div>
</template>

<script>
export default {
    name:'',
    components: {

    },
    props: {

    },
    data() {
        return{
            obj1:{
                name: 'haha',
                age: 10
            },
            obj2:{
                name: 'lalalalala',
                age: 20
            }
        }
    },
    methods: {

    },
    watch: {
        obj1:{
            handler(newVal,oldVal){
                //console.log(newVal,oldVal)
            },
            immediate:true,  //页面刷新就监听
            deep:true // 开启深度监听
        },
        'obj2.age':{
            handler(newVal,oldVal){
                console.log(newVal,oldVal)
            },
            immediate:true,  
            deep:true 
        }
    },
    created() {

    },
    mounted() {

    }
};
</script>

<style scoped lang="less">

</style>
